import {
  Button,
  Modal,
  Icon,
  LegacyCard,
  TextField,
  Listbox,
  AutoSelection,
  Scrollable,
  EmptySearchResult,
  ChoiceList,
} from "@shopify/polaris";
import { DeleteMinor, AddMajor, SearchMinor } from "@shopify/polaris-icons";
import { useState, useCallback, useEffect } from "react";
import styled from "./ChangeMaster.module.less";

const Mock = [
  { value: "ARB", name: "阿尔巴尼亚" },
  { value: "ARJ", name: "阿尔及利亚" },
  { value: "AFH", name: "阿富汗" },
  { value: "AGT", name: "阿根廷" },
];

interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

function ModalExample({ active, setActive }: Props) {
  //

  const handleChange = useCallback(() => setActive(!active), [active]);

  const [valueSJ, setValueSJ] = useState("");

  const handleChangeSJ = useCallback(
    (newValue: string) => setValueSJ(newValue),
    []
  );
  //
  const handleQueryClear = () => {
    handleChangeSearch("");
  };
  const [SearchValue, setSearchValue] = useState("");

  const handleChangeSearch = useCallback(
    (newValue: string) => setSearchValue(newValue),
    []
  );
  //
  const [selected, setSelected] = useState<string[]>(["CH"]);
  const [selectedNumber, setSelectedNumber] = useState("CH");

  return (
    <Modal open={active} noScroll titleHidden onClose={handleChange} title="">
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>更改市场</div>
      </div>
      <div className={styled.CHXPO}>
        <div style={{ height: "652px" }}>
          <div
            style={{
              alignItems: "stretch",
              borderTop: "1px solid #DFE3E8",
              display: "flex",
              flexDirection: "column",
              justifyContent: "stretch",
              position: "relative",
              width: "100%",
              height: "100%",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                padding: "16px",
                borderBottom: "1px solid rgba(0,0,0,0.1)",
              }}
            >
              <TextField
                // focused={showFooterAction}
                clearButton
                labelHidden
                label=""
                placeholder="搜索"
                autoComplete="off"
                value={SearchValue}
                prefix={<Icon source={SearchMinor} />}
                // ariaActiveDescendant={activeOptionId}
                ariaControls="SearchableListbox"
                onChange={handleChangeSearch}
                onClearButtonClick={handleQueryClear}
              />
            </div>
            <Scrollable
              shadow
              style={{
                position: "relative",
                height: "600px",
                width: "100%",
                padding: "var(--p-space-2) 0",
                borderBottomLeftRadius: "var(--p-border-radius-2)",
                borderBottomRightRadius: "var(--p-border-radius-2)",
              }}
              // onScrolledToBottom={handleLazyLoadSegments}
            >
              <div className={styled.Main}>主要市场</div>
              <div
                className={styled.FLEX}
                onClick={() => {
                  setSelectedNumber("CH");
                }}
              >
                <div className={styled.LEFT}>
                  {selectedNumber == "CH" ? (
                    <div className={styled.WXZS}></div>
                  ) : (
                    <div className={styled.WXZ}></div>
                  )}
                </div>
                <div className={styled.TITLE}>中国</div>
                <div>人民币 (CNY ¥)</div>
              </div>
              <div className={styled.Main}>International</div>
              {Mock.map((item, index) => {
                return (
                  <div
                    key={index}
                    className={styled.FLEX}
                    onClick={() => {
                      setSelectedNumber(item.value);
                    }}
                  >
                    <div className={styled.LEFT}>
                      {selectedNumber == item.value ? (
                        <div className={styled.WXZS}></div>
                      ) : (
                        <div className={styled.WXZ}></div>
                      )}
                    </div>
                    <div className={styled.TITLE}>{item.name}</div>
                    <div>人民币 (CNY ¥)</div>
                  </div>
                );
              })}
            </Scrollable>
          </div>
        </div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div>
        <div style={{ marginLeft: "10px" }}>
          {selectedNumber == "CH" && (
            <Button size="slim" primary disabled>
              更改市场
            </Button>
          )}
          {selectedNumber != "CH" && (
            <Button size="slim" primary>
              更改市场
            </Button>
          )}
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
